<template>

	<el-container class="detail-outer-wrap" style="height: 100%;">
  		<el-header class="header" height="100px;">
  			<div class="header-top">
	  			<div class="header-left">上海 晴 2° / 15°</div>
	  			<div class="header-right">鼎牛产品</div>
	  		</div>
	  		<div class="header-bottom">

  				<a class="logo-wrap" href="">
    				<img class="logo" :src="logo">
    			</a>

	  			<div class="header-bottom-main">
	  				<el-row :gutter="30">
					  	<el-col :span="18">
					  		<!-- 面包屑导航条 -->
					  		
					  		<!-- <el-breadcrumb v-if="detailLevel.length>0" class="app-breadcrumb" separator="/">
							    <transition-group name="breadcrumb">
							      	<el-breadcrumb-item v-for="(item,index) in detailLevel" :key="index">
							        	<span v-if="!item.url" class="no-redirect">{{ item.name }}</span>
							        	<a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
							      	</el-breadcrumb-item>
							    </transition-group>
							</el-breadcrumb> -->

					  	</el-col>
					  	<el-col :span="6"></el-col>
					</el-row>
	  			</div>


	  		</div>	
  		</el-header>
  		<el-container class="article-container">
  			
    		<el-main class="main-content-wrap">

    			<el-row class="main-content" :gutter="30">

				  	<el-col class="main-content-wrap" :span="24">

				  		<!-- 详情内容 -->
				  		<div v-if="detail" class="detail-wrap">
				  			<h2 class="module-title">需求内容</h2>
				  			<!-- 发布时间 -->
				  			<p class="time">客户styleFeng于 {{detail.publishTime}} 发布该需求</p>


				  			<div class="detail-detail">
				  				<div v-if="detail.imgIds" class="detail-imgs">
				  					
				  					<!-- 轮播图展示区 -->
				  					<swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
				  						<swiper-slide 
				  							class="slide-item"
				  							v-for="item in detail.imgIds"
				  							:key="item"
				  						>
				  							<img :src="imgPrefix+item">
				  						</swiper-slide>
								        
								        <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
								        <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
				  					</swiper>

				  					<!-- 轮播图缩略图区 -->
				  					<swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
				  						<swiper-slide 
				  							class="slide-item"
				  							v-for="item in detail.imgIds"
				  							:key="item"
				  							:style="{backgroundImage:'url('+imgPrefix+item+')'}"
				  						></swiper-slide>
								        
				  					</swiper>
				  				</div>

				  				<div class="detail-desc">
						  			<li class="item">
						  				<span class="item-title">需求标题</span>
						  				<span class="item-value">{{detail.title}}</span>
						  			</li>
						  			<li class="item">
						  				<span class="item-title">预算金额</span>
						  				<span class="item-value">{{detail.budget}}元</span>
						  			</li>
						  			<li class="item">
						  				<span class="item-title">需求描述</span>
						  				<span class="item-value">{{detail.content}}</span>
						  			</li>

						  			<li class="item">
						  				<span class="item-title">需求类型</span>
						  				<span class="item-value">{{detail.categoryName}}</span>
						  			</li>
						  		</div>	
					  		</div>		
				  		</div>



				  	</el-col>

				  	
				</el-row>

			</el-main>

  		</el-container>
	</el-container>

</template>

<script>
	//轮播图
	import 'swiper/dist/css/swiper.css'
	import { swiper, swiperSlide } from 'vue-awesome-swiper'

	import { mapGetters } from "vuex";
	

	import { detail } from "@/api/service/index"


	import { deepClone } from "@/utils/util"
	import { isMobileDevice } from "@/utils/validate"
	import { baseUrl } from '@/config/env';
	

	//获取图片的url
	const imgPrefix = baseUrl+'/rest/common/preview/';

	export default{
		data(){
			return{
				swiperOptionTop: {
          			spaceBetween: 10,
			        navigation: {
			            nextEl: '.swiper-button-next',
			            prevEl: '.swiper-button-prev'
			        }
        		},
        		swiperOptionThumbs: {
          			spaceBetween: 10,
          			centeredSlides: true,
          			slidesPerView: 'auto',
          			touchRatio: 0.2,
          			slideToClickedSlide: true
        		},
				//分享图片
				zhuanfa:require("@/assets/dingNiu/detail/zhuanfa.png"),
				weibo:require("@/assets/dingNiu/detail/weibo.png"),
				qzone:require("@/assets/dingNiu/detail/qzone.png"),
				wechat:require("@/assets/dingNiu/detail/wechat.png"),
				//服务器图片前缀
            	imgPrefix:imgPrefix,
            	defaultImg:require("@/assets/dingNiu/default.jpg"),
				logo:require("@/assets/logo.png"),
				catagoryList:[],
				detail:null,
				id:'',
			}
		},
		components:{
			swiper,
			swiperSlide
		},
		computed: {
			...mapGetters([
					"detailLevel",
				])
		},
		mounted(){

			this.getDetail();



			
		},
		methods:{
			//init轮播图
			initSwiper(){
				this.$nextTick(() => {
					console.log("-----swiper轮播插件-----")
					console.log(this.$refs.swiperTop)

			        const swiperTop = this.$refs.swiperTop.swiper
			        const swiperThumbs = this.$refs.swiperThumbs.swiper
			        swiperTop.controller.control = swiperThumbs
			        swiperThumbs.controller.control = swiperTop
			   	})
			},
			//获取众包详情
			getDetail(){
				var id = this.$route.params.id;
				this.id = id;
				detail(id).then((res)=>{
					console.log("------众包详情------")
					console.log(res)
					this.detail = this.convertData(res.data.data);
					this.initSwiper();
				})
			},
			//转换数据
			convertData(data){
				if(!data.imgIds) return data;
				data.imgIds = data.imgIds.split(',');
				return data;
			},
			handleLink(item) {
		      const { url } = item
		      
		      this.$router.push({
		      	path:url
		      })
		    },

		}
	}

</script>


<style>
	/*修改登陆tab样式*/
	.login-reg-tabs .el-tabs__nav{
		width: 100%;
		display: flex;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item{
		flex: 1;
		padding: 0;
		text-align: center;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item.is-active,.login-reg-tabs .el-tabs__nav .el-tabs__item:hover{
		color: #FF8100;
	}

	.login-reg-tabs .el-tabs__active-bar{
		background-color: #FF8100;
	}

	.detail-outer-wrap .el-header{
		padding: 0;
		box-shadow: 0 4px 4px rgba(200,200,200,.2);
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 1500;
	}

	/*文章正文内容*/
	.article-content p{
		line-height: 30px;
	}

	.article-content .ql-align-center{
		text-align: center;
	}

	.article-content p img{
		max-width: 100%;
	}
</style>


<style scoped>
	

	.detail-outer-wrap{
		background: #f5f5fa;
	}
	

	.header-top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #000;
		color: #fff;
		padding: 0 40px;
		line-height: 50px;
	}

	.header-bottom{
		padding: 0 20px;
		line-height: 50px;
		background: #ffffff;
		position: relative;
	}

	.header-bottom>.logo-wrap{
		width: 150px;
		padding:0 20px;
		float: left;
		vertical-align: middle;
		line-height: 0;
	}

	

	.header-bottom-main{
		margin-left: 150px;
	}


	.app-breadcrumb{
		line-height: 50px;
	}

	.article-container{
		margin-top: 100px;
		height: 100%;
		overflow: auto;
	}

	.nav-wrap{
		padding: 20px;
		background-color: #ffffff;
	}
	.logo-wrap,.logo-wrap .logo{
		width:100%;
	}




</style>


<style lang="scss" scoped>
	.detail-wrap{
		background: #ffffff;
		padding: 20px;
		.module-title{
			font-size: 16px;
			color: #000;
			position: relative;
			padding-left: 15px;
			&:before{
				position: absolute;
			    content: "";
			    top: 2px;
			    left: 0;
			    width: 4px;
			    height: 16px;
			    background: #ff8100;
			};
		}
		.time{
			color: #999;
		}
		.detail-detail{
			display: flex;
			flex-direction: row;
			.detail-imgs{
				margin-right: 30px;
			}
			.detail-desc{
				flex-grow: 1;
				.item{
					list-style: none;
					margin-bottom: 15px;
					.item-title{
						color: #999;
						margin-right: 20px;
					}
					.item-value{
						color: #333;
					}
				}
			}
		}
		

	}

	.detail-imgs{
		width: 420px;
		height: 320px;
		.swiper-container {
    		
    		&.gallery-top {
    			height: 75%!important;
    			background-color: #ffffff;
    			border: 1px solid #eee;
    			width: 100%;
    			.swiper-slide {
				    background-size: 100%;
    				background-position: center; 
    				text-align: center;
    				img{
    					height: 100%;
    				}
				}
    		}
    		&.gallery-thumbs {
    			background-color: #ffffff;
			    height: 25%!important;
			    box-sizing: border-box;
			    padding: 10px 0;
			    .swiper-slide {
			    	background-size: cover;
			    	background-position: center;

				    width: 25%;
				    opacity: 0.4;
				    &.swiper-slide-active {
					    opacity: 1;
					}
				}
			}
  		}
	}

  
  
  
</style>

